<template>
    <!-- 商品分类 -->
    
        <el-card shadow="never" style="margin-bottom: 14px;" :body-style="{ paddingBottom: '2px' }">
            <el-form :inline="true" :model="searchdata">
                <el-form-item label="商品分类">

                    <el-select clearable v-model="searchdata._id" style="width: 250px;">
                        <el-option v-for="item in allclassifydata" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="分类状态">
                    <el-select clearable v-model="searchdata.state" style="width: 250px;">
                        <el-option label="显示" :value="1"></el-option>
                        <el-option label="影藏" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称">

                    <el-input clearable v-model="searchdata.name" style="width: 250px;">

                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getclassifydata">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>




        <el-card shadow="never">
            <div style="margin-bottom: 14px;">
                <el-button type="primary" @click="dialogopen = true">添加分类</el-button>
            </div>




            <!-- 表格渲染 -->
            <BaseTable :data="tableData.rows" :columns="columns" :total="tableData.total" v-model="pageData">
                <!-- 图片 -->
                <template #image="{ row }">
                    <img width="30px" height="30px" :src="row.image" alt="">
                </template>


                <!-- 状态显示插槽 -->
                <template #state="{ row }">
                    <el-switch v-model="row.state" active-text="开启" inactive-text="关闭" inline-prompt :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
                <!--操作按钮插槽  -->
                <template #action="{ row }">
                    <el-button type="primary" text @click="onopenupdatedialog(row)">修改</el-button>
                    <el-button type="success" text @click="deletConfirm(row._id)">删除</el-button>
                </template>


            </BaseTable>




            
        </el-card>
        <!-- 新增和修改弹窗 -->
        <Classifydialog v-model="dialogopen" :updateitem="updateitem" @getclassifydata="getclassifydata" />
   

</template>

<script setup lang="ts">
import api from '@/api';
import { watch, ref } from 'vue';
import { onMounted, reactive } from 'vue';
import { searchparams } from '@/api/modules/classifiesff';
import { classifyitem } from '@/api/modules/classifiesff';
import Classifydialog from './Classifydialog.vue';
import { ElMessageBox,ElMessage } from 'element-plus';
//表格列表配置
let columns = [
    {
        label: '分类名称',
        prop: 'name'
    },
    {
        label: '商品图',
        prop: 'image',
        hasChildren: true,
    },
    // {
    //     label: '分类图标',
    //     prop: 'icon'
    // },
    {
        label: '排序',
        prop: 'sort'
    },
    {
        label: '状态',
        prop: 'state'
    },
    {
        label: '操作',
        prop: 'action'
    },


]
let tableData = reactive({
    rows: [],
    total: 0
})


let dialogopen = ref(false)

let updateitem = ref({})









//搜索的所有数据
let allclassifydata = ref<classifyitem[]>([])
//分页查询
let searchdata = ref<searchparams>({})



//分页数据
let pageData = ref<pagequery>({
    currentPage: 1,
    pageSize: 5
})


watch([pageData, searchdata], () => {
    getclassifydata();
}, { deep: true })




onMounted(() => {
    //获取表格中分页的分类数据
    getclassifydata();
    //获取下拉列表需要的所有分类数据
    getallclassifydata()
})
//表格，分页查询商品分类数据
let getclassifydata = () => {
    api.classifies.search({
        ...pageData.value,
        ...searchdata.value
    })
        .then(res => {
            console.log(res);
            if (res.code = 200) {
                tableData.rows = res.data.rows;
                tableData.total = res.data.total
            }
        })
}


//搜索框的请求

let getallclassifydata = () => {
    api.classifies.search()
        .then(res => {
            console.log(res);
            if (res.code = 200) {
                allclassifydata.value = res.data.rows
            }
        })
}

let onopenupdatedialog = (row: classifyitem) => {
    dialogopen.value = true;
    updateitem.value = { ...row }
}




//删除前的确认
let deletConfirm = (_id: string) => {
    ElMessageBox.confirm(
        '数据删除后不可恢复，确认删除？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //确认删除
            handleDelete(_id);
        })
        .catch(() => {
            //取消删除
        })
}

let handleDelete = (_id: string) => {
    api.classifies.remove({
        _id
    }).then(res=>{
        // console.log(res);
        if(res.code=200){
ElMessage.success('用户删除成功');
getclassifydata()

        }else{
            ElMessage.error(res.message)
        }
    })
}








</script>

<style scoped></style>